<template>
    <div class="home">
        <div class="left">
            <leftPanel :noticeMap="data.noticeMap" :deptSize="data.deptSize" :eventMap="data.eventMap"  />
        </div>
        <div class="mainM">
            <mainPanel :mapWeek="week" 
                :data_count="data_count"
                :event_count="data.event_count"
                :name="name" />
        </div>
        <div class="right">
            <rightPanel :mapMonth="month" />
        </div>
    </div>
</template>


<script>
import leftPanel from './component/leftPanel/index.vue'
import rightPanel from './component/rightPanel/index.vue'
import mainPanel from './component/mainPanel/index.vue'
export default {
    components: { leftPanel, rightPanel, mainPanel },
    data() {
        return {
            deptId: 100,
            data: null,
            name: '呼和浩特',
            data_count: 0,
            week: [],
            month: [],
        }
    },
    beforeMount() {
        this.deptId = this.$route.query.deptId || 100;
        this.fetchData(this.deptId)
        this.$bus.$on("loadData", this.loadData)
        this.fetchWeekData()
        this.fetchMonthData()
    },
    mounted() {
        setInterval(()=>{
            this.$router.go(0)
        }, 1000 * 60)
    },
    methods: {
        fetchData(deptId) {
            this.data = null;
            this.$api.screen.getScreenDataByDeptId(deptId).then(res=>{
                if(res.code==0) {
                    this.data = res.data;
                    if(this.deptId==100) {
                        this.name = '内蒙分公司'
                    } else {
                        this.name = res.data.city;
                    }
                    
                }
            })
        },
        loadData(id) {
            this.fetchData(id)
        },
        fetchWeekData() {
            this.$api.screen.getData(this.deptId, 'screenCurrentWeek').then(res=>{
                this.week = res;
                let count = 0;
                res.forEach(e=>{
                    count += e.data_count;
                })
                this.data_count = count;
            })
        },
        fetchMonthData() {
            this.$api.screen.getData(this.deptId, 'screenCurrentMonth').then(res=>{
                this.month = res;
            })
        },
      
    }
}
</script>

<style lang="scss" scoped>
.home {
    width: 100%;
    height: 100%;
    position: relative;
    display: flex;

    

    @keyframes pulse {
        0% {
        border-color: #4a90e2;
        transform: scale(1);
        }

        50% {
        border-color: #357ebd;
        transform: scale(1
        .05);
        }

        100% {
        border-color: #4a90e2;
        transform: scale(1);
        }
    }

    .left, .mainM, .right {
        height: 95%;
    }

    .mainM {
        flex: 1;
    }
    
}
</style>